<template>
  <div>
    <div id="slogan">
      <p class="tag">我的数据</p>
      <p>参与垃圾分类，保护地球家园，共创美好世界。</p>
    </div>
    <div ref="echartsContainer" class="echartsContainer"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { getStatistics } from "@/api/info";
export default {
  name: "EChartsComponent",
  data() {
    return {};
  },
  mounted() {
    this.queryStatistics();
  },
  methods: {
    queryStatistics() {
      let myChart = echarts.init(this.$refs.echartsContainer);
      getStatistics(this.$store.getters.userInfo.id).then((res) => {
        console.log(res, "lllll");
        let xAxis = (res.data || []).map((item) => item.category || "-");
        let data = (res.data || []).map((item) => item.number || 0);
        let options = {
          title: {
            text: "",
          },
          polar: {
            radius: [30, "80%"],
          },
          radiusAxis: {
            max: 4,
          },
          angleAxis: {
            type: "category",
            data: xAxis,
            startAngle: 75,
          },
          tooltip: {},
          series: {
            type: "bar",
            data,
            coordinateSystem: "polar",
            label: {
              show: true,
              position: "middle",
              formatter: "{b}: {c}",
            },
          },
        };
        myChart.setOption(options);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.echartsContainer {
  width: 80vw;
  height: 600px;
  margin: 15px auto;
}
</style>
